function App() {
  // 声明变量
  const str = 'Hello React';
  const n = true;
  const flag = false;
  const obj = {
    name: 'jack'
  }
  const arr = [['a', 'b', 'c'], ['e', 'f']]

  const lis = [
    <li>1</li>,
    <li>2</li>,
    <li>3</li>
  ];
  const data = [
    'aa', 'bb', 'cc', 'dd'
  ]
  const newData = data.map((item, index) => <li key={index}>{item}</li>)

  const title = '您好';
  const head = <header>{title}</header>;

  const style = {
    color: 'red',
    backgroundColor: 'yellow'
  };

  const sum = () => 3;

  const dom = () => {
    if (flag) {
      return <p>flag 为 true</p>
    } else {
      return <p>flag 为 false</p>
    }
  }

  return (
    <div className="App">
      <h1 title={title} style={style}>{str}</h1>
      <p>{n}</p>
      {/* <p>{obj}</p> */}
      <p className={n ? 'on' : ''}>{obj.name}</p>
      <p className={['class1', 'class2', (n ? 'on' : '')].join(' ')}></p>
      <p>{arr}</p>
      {/* 事件绑定 */}
      <button onClick="">按钮</button>
      {head}
      {sum()}

      {/* 条件渲染 */}
      {dom()}
      {flag ? <p>flag 为 true</p> : <p>flag 为 false</p>}
      {flag && <p>flag 为 true</p>}

      <ul>
        {lis}
      </ul>

      <ul>
        {newData}
      </ul>
    </div>
  );
}

export default App;
